<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
     <style>
     * { margin: 0; padding: 0 }.app {text-align: center; padding: 20px; max-width: 748px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }.container { width: 150px; height: 240px; padding: 10px; font-size: 14px; -webkit-box-shadow: 0 0 5px 3px rgba(51, 51, 51, .26); box-shadow: 0 0 5px 3px rgba(51, 51, 51, .26); margin-top: 20px; }img {width: 150px;}
     button { margin: 0 auto; width: 748px; height: 50px; border-radius: 2px; display: block; height: 40px; line-height: 40px; text-align: center; font-size: 14px; background: #f7f7f7; text-decoration: none; color: #258dcd; border:none; }
     </style>
</head>
<body>
    <div id="app">
        <div class="app">
            <div class="container" v-for="item of movies" ref="wrap">
                <img :src="item.images.small" alt="">
                <p>{{item.title}}</p>
                </div>
                </div>
                <button @click="add" v-if="addMore">加载更多</button>
                </div>
                <script> 
                var url = "https://douban.uieee.com/v2/movie/top250" 
                new Vue({ 
                    el: "#app",
                     data: { 
                         msg: "hello world",
                          movies: [], 
                          addMore:false 
                          },
                          created() 
                          { 
                              $.ajax({ url, dataType: "jsonp", 
                              success: res => 
                              { 
                                  this.movies = res.subjects; 
                                  this.addMore = true 
                                  }
                                   }
                                   )
                                   },
    methods: {
         add() {
              this.addMore = false; 
              var length = this.movies.length; 
              var url = `https://api.douban.com/v2/movie/top250?start=${length}&count=20`; 
              $.ajax({
                   url, dataType: "jsonp", 
                   success: res => {
                        this.movies = [...this.movies,
                         ...res.subjects
                         ] 
                         this.addMore = true; } }) } }, })
    </script>
</body>
</html>